@extends('layouts.modal')
@section('content')
    <style>
        .layui-form-radio > i {
            font-size: 16px;
        }

        .layui-form-radio * {
            font-size: 12px;
        }
    </style>
    <form class="layui-form layui-card" action="/" method="post" autocomplete="off">
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label">{{ trans('common.type') }} <font color="red">*</font></label>
                <div class="layui-input-block">
                    @foreach($types as $key=>$value)
                        <input type="radio" lay-filter="filter" style="font-size: 12px"
                               name="type"
                               value="{{ $key }}" {{ isset($menu_show) && $is_pid==false ? "disabled" : "" }}
                               title="{{ $value }}" {{ isset($menu_show) && $is_pid==false && $menu_show->type == $key ?"checked":"" }}>
                    @endforeach
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">{{ trans('menu.parent_menu') }} <font color="red">*</font></label>
                <div class="layui-input-block">
                    <select name="pid" id="pid" lay-verify="required">
                        <option value="-1">{{ trans('menu.top_menu') }}</option>
                        @foreach($menus as $menu)
                            <option
                                value="{{ $menu->id }}" {{ (isset($menu_show) && $is_pid==false && $menu_show->pid == $menu->id) || ($is_pid==true && isset($menu_show) && $menu_show->id == $menu->id ) ?"selected":""  }}>{!! $menu->name !!} </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label label-required-next label-required-prev">{{ trans('menu.menu_name') }}
                    <font
                        color="red">*</font></label>
                <div class="layui-input-block">
                    <input name="name" value='{{ isset($menu_show) && $is_pid==false ? $menu_show->name : "" }}'
                           id="name" required
                           placeholder="{{ trans('menu.please_input_menu_name') }}"
                           class="layui-input">
                    <input type="hidden" id="id"
                           value="{{ isset($menu_show) && $is_pid==false ? $menu_show->id : "" }}">
                </div>
            </div>


            <div class="layui-form-item"
                 id="filter_menu">
                <label class="layui-form-label label-required-next label-required-prev">{{ trans('menu.menu_rule') }}
                    <font
                        color="red">*</font></label>
                <div class="layui-input-block">
                    <input name="rule" value='{{ isset($menu_show) && $is_pid == false  ? $menu_show->rule : "" }}'
                           id="rule" required
                           placeholder="{{ trans('menu.please_input_menu_rule') }}"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">{{ trans('menu.icon') }} </label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input placeholder="{{ trans('menu.please_input_icon') }}" name="icon" id="icon"
                               value="{{ isset($menu_show) && $is_pid==false ? $menu_show->icon :"" }}"
                               class="layui-input">
                    </div>
                    <span class="layui-btn layui-btn-primary">
                        <i class="" id="showIcon"></i>
                    </span>
                    <span id="selectIcon" onclick="selectIcon()" class="layui-btn layui-btn-primary"
                          style="font-size: 12px">{{ trans('menu.select_icon') }}
                    </span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">{{ trans('common.sort') }} </label>
                <div class="layui-input-block">
                    <input type="number" name="sort" id="sort"
                           value="{{ isset($menu_show) && $is_pid==false ? $menu_show->sort : 0 }}"
                           class="layui-input">
                </div>
            </div>


            <div class="layui-form-item"></div>
            <div class="layui-form-item text-center">
                <button class="layui-btn layui-btn-sm" onclick="save()"
                        type="button">{{ trans('common.save_data') }}</button>
                <button class="layui-btn layui-btn-danger layui-btn-sm" onclick="cancel()"
                        type="button">{{ trans('common.cancel') }}</button>
            </div>
        </div>
    </form>

    <script type="text/javascript">
        function save() {
            var data = {};
            var postUrl = "{{ url('menu/add') }}";

            var id = $.trim($("#id").val());
            var type = $.trim($("input[name='type']:checked").val());
            var pid = $.trim($("#pid option:selected").val());
            var name = $.trim($("#name").val());
            var rule = $.trim($("#rule").val());
            var icon = $.trim($("#icon").val());
            var sort = $.trim($("#sort").val());

            if (id > 0) {
                postUrl = "{{ url('menu/edit') }}";
                data.id = id;
            }
            if (type == "") {
                layer.msg("{{ trans('menu.type_required') }}");
                return false;
            }
            data.type = type;
            if (pid == "") {
                layer.msg("{{ trans('menu.pid_required') }}");
                return false;
            }
            data.pid = pid;
            if (name == "") {
                layer.msg("{{ trans('menu.name_required') }}");
                return false;
            }
            data.name = name;
            if (rule == "") {
                layer.msg("{{ trans('menu.rule_required') }}");
                return false;
            }
            data.rule = rule;
            data.icon = icon;
            data.sort = sort;
            $.ajax({
                url: postUrl,
                type: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                ContentType: "application/json; charset=utf-8",
                data: data,
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg("{{ trans('common.operation_success') }}", {
                            time: 1000
                        }, function () {
                            parent.layer.closeAll();
                            parent.location.href = '{{ url('menu') }}';
                        })
                    } else {
                        layer.msg(result.msg)
                    }
                }
            });
        }

        function selectIcon() {
            layer.open({
                type: 2,
                title: '{{ trans('menu.select_icon') }}',
                area: ['450px', '400px'],
                content: '{{ url('menu/icon') }}'
            });
        }

        function cancel() {
            parent.layer.closeAll();
        }
    </script>
@endsection




